<template>
	<view class="user-manage">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input 
				class="search-input" 
				type="text" 
				v-model="searchKeyword"
				placeholder="搜索用户名/手机号"
				@input="handleSearch"
			/>
			<text class="iconfont icon-search"></text>
		</view>
		
		<!-- 用户列表 -->
		<scroll-view 
			class="user-list" 
			scroll-y 
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="user-item" v-for="user in userList" :key="user._id">
				<view class="user-info">
					<image class="avatar" :src="user.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
					<view class="info">
						<text class="username">{{ user.username || '未设置' }}</text>
						<text class="phone">{{ user.mobile || '未绑定手机' }}</text>
					</view>
				</view>
				<view class="user-actions">
					<button 
						class="action-btn edit" 
						@click="handleEdit(user)"
					>
						<text class="iconfont icon-edit"></text>
						<text>编辑</text>
					</button>
					<button 
						class="action-btn delete" 
						@click="handleDelete(user)"
					>
						<text class="iconfont icon-delete"></text>
						<text>删除</text>
					</button>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore">
				<text>{{ isLoading ? '加载中...' : '上拉加载更多' }}</text>
			</view>
			
			<!-- 无数据提示 -->
			<view class="empty-tip" v-if="!isLoading && userList.length === 0">
				<text>暂无用户数据</text>
			</view>
		</scroll-view>
		
		<!-- 添加用户按钮 -->
		<button class="add-btn" @click="handleAdd">
			<text class="iconfont icon-add"></text>
			<text>添加用户</text>
		</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			userList: [],
			page: 1,
			pageSize: 10,
			hasMore: true,
			isLoading: false,
			isRefreshing: false
		}
	},
	onLoad() {
		this.loadUserList()
	},
	methods: {
		// 加载用户列表
		async loadUserList(isRefresh = false) {
			if (this.isLoading) return
			
			this.isLoading = true
			try {
				const res = await uniCloud.callFunction({
					name: 'getUserList',
					data: {
						page: this.page,
						pageSize: this.pageSize,
						keyword: this.searchKeyword
					}
				})
				
				if (res.result.code === 0) {
					if (isRefresh) {
						this.userList = res.result.data.list
					} else {
						this.userList = [...this.userList, ...res.result.data.list]
					}
					this.hasMore = res.result.data.hasMore
				} else {
					uni.showToast({
						title: res.result.msg || '加载失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载用户列表失败', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.isLoading = false
				this.isRefreshing = false
			}
		},
		
		// 搜索处理
		handleSearch() {
			this.page = 1
			this.hasMore = true
			this.loadUserList(true)
		},
		
		// 下拉刷新
		onRefresh() {
			this.isRefreshing = true
			this.page = 1
			this.hasMore = true
			this.loadUserList(true)
		},
		
		// 加载更多
		loadMore() {
			if (!this.hasMore || this.isLoading) return
			this.page++
			this.loadUserList()
		},
		
		// 添加用户
		handleAdd() {
			uni.navigateTo({
				url: '/pages/mine/user-edit'
			})
		},
		
		// 编辑用户
		handleEdit(user) {
			uni.navigateTo({
				url: `/pages/mine/user-edit?id=${user._id}`
			})
		},
		
		// 删除用户
		handleDelete(user) {
			console.log('要删除的用户信息：', user)
			uni.showModal({
				title: '提示',
				content: `确定要删除用户 ${user.username || '未设置'} 吗？`,
				success: async (res) => {
					if (res.confirm) {
						try {
							console.log('开始删除用户，用户ID：', user._id)
							const result = await uniCloud.callFunction({
								name: 'deleteUser',
								data: { 
									userId: user._id,
									username: user.username // 添加用户名用于日志
								}
							})
							
							console.log('删除结果：', result)
							
							if (result.result.code === 0) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								this.page = 1
								this.loadUserList(true)
							} else {
								uni.showToast({
									title: result.result.msg || '删除失败',
									icon: 'none'
								})
							}
						} catch (error) {
							console.error('删除用户失败', error)
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							})
						}
					}
				}
			})
		}
	}
}
</script>

<style>
.user-manage {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding-bottom: 120rpx;
}

.search-bar {
	position: relative;
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.search-input {
	width: 100%;
	height: 80rpx;
	background-color: #f5f5f5;
	border-radius: 40rpx;
	padding: 0 80rpx 0 30rpx;
	font-size: 28rpx;
}

.search-bar .iconfont {
	position: absolute;
	right: 50rpx;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 32rpx;
}

.user-list {
	height: calc(100vh - 200rpx);
}

.user-item {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-info {
	display: flex;
	align-items: center;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.info {
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.phone {
	font-size: 24rpx;
	color: #999;
}

.user-actions {
	display: flex;
}

.action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160rpx;
	height: 60rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	margin-left: 20rpx;
}

.action-btn .iconfont {
	margin-right: 10rpx;
	font-size: 28rpx;
}

.action-btn.edit {
	background-color: #e6f7ff;
	color: #1890ff;
}

.action-btn.delete {
	background-color: #fff1f0;
	color: #ff4d4f;
}

.load-more {
	text-align: center;
	padding: 30rpx;
	color: #999;
	font-size: 24rpx;
}

.empty-tip {
	text-align: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 28rpx;
}

.add-btn {
	position: fixed;
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 600rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #4a6ee0;
	color: #fff;
	border-radius: 40rpx;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-btn .iconfont {
	margin-right: 10rpx;
	font-size: 36rpx;
}

/* 图标字体 */
@font-face {
	font-family: "iconfont";
	src: url('//at.alicdn.com/t/font_3456789_abcdef.woff2') format('woff2');
}

.iconfont {
	font-family: "iconfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
	content: "\e8ef";
}

.icon-edit:before {
	content: "\e8ac";
}

.icon-delete:before {
	content: "\e8b6";
}

.icon-add:before {
	content: "\e8fe";
}
</style> 